<template>
  <div>
    <div class="listerGroup">
      <!-- 没有绑定支付宝的 -->
      <div class="lister" style="border-bottom: 1px solid #c0c4cc" v-if="datas.crmSettAlipayInfo==null">
        <div class="subList">
          <div class="subListTitle">结算账户1</div>
          <div class="subListCont">支付宝</div>
        </div>
        <div class="subList" style="border-left: 1px solid #c0c4cc">
          <div class="subListTitle">状态</div>
          <div class="subListCont">暂未配置，请联系总机构配置支付宝</div>
        </div>
      </div>
      <!-- 绑定了支付宝的 -->
      <div v-else>
        <div class="lister">
          <div class="subList">
            <div class="subListTitle">结算账户1</div>
            <div class="subListCont">支付宝</div>
          </div>
          <div class="subList" style="border-left: 1px solid #c0c4cc">
            <div class="subListTitle">支付宝名称</div>
            <div class="subListCont">{{datas.crmSettAlipayInfo.name}}</div>
          </div>
        </div>
        <div class="lister" style="border-bottom: 1px solid #c0c4cc">
          <div class="subList" style="width: 100%">
            <div class="subListTitle">支付宝账号</div>
            <div class="subListCont">{{datas.crmSettAlipayInfo.alipayAccount}}</div>
          </div>
        </div>
      </div>

      <!-- 没有绑定银行卡的 -->
      <div
        class="lister"
        style="border-bottom: 1px solid #c0c4cc; margin-top: 36px"
        v-if="datas.crmCenterSettBankInfo==null"
      >
        <div class="subList">
          <div class="subListTitle">结算账户2</div>
          <div class="subListCont">银行卡</div>
        </div>
        <div class="subList" style="border-left: 1px solid #c0c4cc">
          <div class="subListTitle">状态</div>
          <div class="subListCont">未绑定银行卡，<span class="bindCardTxt" @click="bindCard">立即绑定</span></div>
        </div>
      </div>
      <!-- 绑定银行卡的  对公对私 -->
      <div v-else  style="margin-top: 30px">
        <div class="lister" >
          <div class="subList">
            <div class="subListTitle">结算账户2</div>
            <div class="subListCont">银行卡</div>
          </div>
          <div class="subList" style="border-left: 1px solid #c0c4cc">
            <div class="subListTitle">账户类型</div>
            <div class="subListCont">
              <span v-if="datas.crmCenterSettBankInfo.cardType==1">对公</span>
              <span v-if="datas.crmCenterSettBankInfo.cardType==2">对私</span>
            </div>
          </div>
        </div>
        <div class="lister" >
          <div class="subList">
            <div class="subListTitle">账户名称</div>
            <div class="subListCont">{{datas.crmCenterSettBankInfo.accountName}}</div>
          </div>
          <div class="subList" >
            <div class="subListTitle">开户账号</div>
            <div class="subListCont">
                {{datas.crmCenterSettBankInfo.accountNo}}
                <span @click="changeAccount" class="changeAccount" v-if="datas.crmCenterSettBankInfo.cardType==1">变更账号</span>
            </div>
          </div>
        </div>
        <div class="lister">
          <div class="subList">
            <div class="subListTitle">开户银行</div>
            <div class="subListCont">{{datas.crmCenterSettBankInfo.bankName}}</div>
          </div>
          <div class="subList" style="border-left: 1px solid #c0c4cc">
            <div class="subListTitle">开户地区</div>
            <div class="subListCont">{{datas.crmCenterSettBankInfo.openCity}}{{datas.crmCenterSettBankInfo.openProvince}}</div>
          </div>
        </div>
        <div class="lister" style="border-bottom: 1px solid #c0c4cc">
          <div class="subList">
            <div class="subListTitle">开户支行</div>
            <div class="subListCont">{{datas.crmCenterSettBankInfo.openBank}}</div>
          </div>
          <div class="subList" style="border-left: 1px solid #c0c4cc">
            <div class="subListTitle">开户手机号</div>
            <div class="subListCont">{{datas.crmCenterSettBankInfo.reservedMobile}}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios"
export default {
  data() {
    return {
      datas:""
    }
  },
  created() {
    this.getData()
  },
  methods: {
    getData(){
      var officeUid = localStorage.getItem("uid");
      axios
        .post("/api/account/getOfficeSettleInfo", {officeUid})
        .then((res) => {
          console.log("列表");
          if (res.data.code = "0000") {
            this.datas = res.data.data
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 变更账号
    changeAccount(){
      this.$router.push({
        name:"meInfo",
        query:{
          requestType:"2"
        }
      })
    },
    // 绑定银行卡
    bindCard(){
      this.$router.push({
        name:"meInfo",
        query:{
          requestType:"1"
        }
      })
      return
    }
  },
};
</script>

<style scoped>
.lister {
  display: flex;
}
.lister .subList:last-of-type {
  border-right: 1px solid #c0c4cc;
}
.subList {
  display: flex;
  width: 50%;
  border-top: 1px solid #c0c4cc;
}
.subListTitle {
  width: 230px;
  border-right: 1px solid #c0c4cc;
  height: 36px;
  line-height: 36px;
  box-sizing: border-box;
  background-color: #ebeef5;
  padding-left: 15px;
}
.subListCont {
  height: 36px;
  line-height: 36px;
  box-sizing: border-box;
  padding-left: 15px;
}
.listerGroup {
  border-left: 1px solid #c0c4cc;
  border-right: 1px solid #c0c4cc;
}
.bindCardTxt{
  color: #409EFF;
  cursor: pointer;
}
.changeAccount{ 
  cursor: pointer;
  color: #409EFF;
}
</style>